$(function () {
    let form = layui.form;
    initArtCateList();
    function initArtCateList() {
        // 发送ajax
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 初始化
            let arr = ['<option value="">请选择文章类别</option>'];
            res.data.data.forEach(ele => {
                arr.push(`<option value="${ele.Id}">${ele.name}</option>`);
            });
            // 循环完毕后，在渲染
            $("[name=cate_id]").empty().html(arr.join(''));
            form.render();
        });
    }

    // 2.初始化富文本编辑器
    initEditor();

    // 3.1. 初始化图片裁剪器
    var $image = $('#image')
    // 3.2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 3.3. 初始化裁剪区域
    $image.cropper(options)

    // 需求5: 生成 state 
    // 状态，可选值为：已发布、草稿
    let state = "";
    $("#btn1").on('click', function () {
        state = '已发布';
    })
    $("#btn2").on('click', function () {
        state = '草稿';
    })

    // 需求6: 点击按钮，选择图片，渲染到页面;
    $("#chooseImageBtn").on('click', function () {
        $("#chooseImageInp").click();
    })
    $("#chooseImageInp").on('change', function (e) {
        // 1. 拿到用户选择的文件
        var file = e.target.files[0]
        // 非空判断
        if (file == undefined) {
            return;
        }
        // 2. 根据选择的文件，创建一个对应的 URL 地址：
        var newImgURL = URL.createObjectURL(file)
        // 3. 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
        $image
            .cropper('destroy')      // 销毁旧的裁剪区域
            .attr('src', newImgURL)  // 重新设置图片路径
            .cropper(options)        // 重新初始化裁剪区域
    })

    // 需求4: 提交表单;
    $("#formPub").on('submit', function (e) {
        // 阻止默认行为
        e.preventDefault();
        // 生成FormData对象;
        let fd = new FormData(this); // 参数可以是一个 DOM 对象;
        // 添加状态
        fd.append('state', state); // 属性是字符串，值是变量！
        // cropper生成二进制的文件对象；
        $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        }).toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
            // 得到文件对象后，进行后续的操作
            fd.append('cover_img', blob);
            console.log(...fd);
            axios({
                method: 'POST',
                url: '/my/article/add',
                data: fd
            }).then(res => {
                if (res.data.status != 0) {
                    return layer.msg(res.data.message);
                }
                layer.msg('恭喜您，添加文章成功！');
                // 跳转到文章列表页
                setTimeout(function () {
                    window.parent.document.querySelector('#art_list').click();
                }, 2000);
            });
        });
        // 注意: 生成文件对象，是异步方法，结果用回调函数接收;
    })

});